<template>
	<view class="box">
		<!-- 搜索导航 -->
		  <view class="search">
		    <icon @click="search" type="search" size="32rpx"></icon>
		    <input @focus="focus" focus :value="value" @input="values" class="search_title" placeholder="搜索歌曲" />
			<icon v-if="value" @click="clear" type="clear"></icon>
		  </view>
		  <!-- 历史记录 -->
		  <view v-if="hist.length" :hidden="show" class="hostly">
			  <!-- 头部 -->
			  <view class="hostly_top">
				  <text class="hostly_top_h">历史记录</text>
				  <image @click="hostlyhidden" mode="widthFix" class="hostly_top_img" src="../../static/delete.png"></image>
			  </view>
			  <!-- 历史列表 -->
			  <view class="hostly_lists">
				  <view v-for="(item,index) of hist" :key="index" class="hostly_list">{{item}}</view>
			  </view>
		  </view>
		  <!-- 热搜榜 -->
		  <view :hidden="show" class="rslists">
			  <view class="rslists_title">热搜榜</view>
			  <view class="rslists_cont" v-for="(item,index) of resonglist" :key="index">
				  <text class="rslists_cont_index" :class="{activetcp:index<3}">{{index+1}}</text>
				  <view class="rslists_cont_conts">
					  <view class="rslists_cont_conts_title">
						  <text>{{item.searchWord}}</text>
						  <image class="text_img" mode="widthFix" v-if="item.iconType==1" :src="item.iconUrl"></image>
					  </view>
					  <text class="rslists_cont_conts_ci">{{item.content}}</text>
				  </view>
				  <text class="rslists_cont_count">{{item.score}}</text>
			  </view>
		  </view>
		  <!-- 搜索列表 -->
		  <view :hidden="!show" class="keys">
			<text class="keys_title">搜索 {{value}}</text>
		  	<view @click="keys_query(item.id,item.name)"  class="keys_list" v-for="(item,index) of keywordlist" :key="index">
		  		<icon type="search" size="32rpx"></icon>
				<text class="keys_list_name">{{item.name}}</text>
		  	</view>
		  </view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				// 输入框value
				value:'',
				// 热搜榜
				resonglist:[],
				// 搜索列表
				keywordlist:[],
				show:false,
				// 历史记录
				hist:[]
			}
		},
		onLoad() {
			this.hosts()
			this.getresonglist()
		},
		methods:{
			// 双向绑定
			values(e){
				this.value=e.detail.value
				if(this.value){
					this.show=true
				}else{
					this.show=false
				}
				this.keywords(this.value)
			},
			// 关键字
			keywords(query){
				uni.request({
					url:"https://autumnfish.cn/search?keywords="+query,
					success: (res) => {
						console.log(res)
						this.keywordlist=res.data.result.songs
					}
				})
			},
			// 获取历史记录
			hosts(){
				uni.getStorage({
					key:"host",
					success:res=>{
						console.log('host',res)
					}
				})
			},
			// 点击搜索列表
			keys_query(id,name){
				// 获取本地存储
				uni.getStorage({
					key:'keys',
					success: (res) => {
						// 添加本地存储
						uni.setStorage({
							key:"keys",
							data:name
						})
						this.hist.push(res.data)
					},
					fail: (res) => {
						// 添加本地存储
						uni.setStorage({
							key:"keys",
							data:name
						})
					}
				})
				
				console.log(this.hist)
			},
			// 情况历史记录
			hostlyhidden(){
				
			},
			// 清空输入框
			clear(e){
				this.value=""
				this.keywordlist=[]
				this.show=false
			},
			// 获取焦点后
			focus(e){
				// console.log(e)
			},
			// 搜索
			search(val){
				// console.log(val)
			},
			// 获取热搜榜
			getresonglist(){
				uni.request({
					url:"https://autumnfish.cn/search/hot/detail",
					success: (res) => {
						// console.log(res.data.data)
						this.resonglist=res.data.data
					}
				})
			}
		}
	}
</script>

<style>
	.box{
	  padding: 0 20rpx;
	}
	input{
		height: 100%;
	}
	.search{
	  display: flex;
	  align-items: center;
	  width: 100%;
	  margin-top: 20rpx;
	  background: #eee;
	  padding: 12rpx 20rpx;
	  box-sizing: border-box;
	  border-radius: 40rpx;
	}
	.search_title{
	  flex:1;
	  font-size: 26rpx;
	  color: #666;
	  margin-left: 14rpx;
	  margin-right: 14rpx;
	}
	.hostly{
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}
	.hostly_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 20rpx;
	}
	.hostly_top_img{
		width: 40rpx;
	}
	.hostly_lists{
		display: flex;
		flex-wrap: wrap;
		flex-shrink: 0;
	}
	.hostly_list{
		font-size: 24rpx;
		background-color: #eee;
		padding: 20rpx 30rpx;
		margin:14rpx 20rpx 14rpx 0;
		border-radius: 40rpx;
	}
	.rslists{
		margin-top: 30rpx;
	}
	.rslists_title{
		font-size: 28rpx;
		color:#222222;
	}
	.rslists_cont{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
	}
	.rslists_cont_index{
		width: 40rpx;
		font-size: 28rpx;
		padding: 0 10rpx;
		color: #555555;
	}
	.rslists_cont_conts{
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.rslists_cont_conts_title{
		font-size: 32rpx;
		color: #000000;
	}
	.rslists_cont_conts_ci{
		font-size: 24rpx;
		color: #999;
	}
	.text_img{
		width: 50rpx;
		margin-left: 18rpx;
	}
	.rslists_cont_count{
		font-size: 24rpx;
		color: #999;
	}
	.activetcp{
		color: red;
	}
	.keys{
		margin-top: 20rpx;
		border-top: 2rpx solid #ccc;
		padding: 20rpx;
	}
	.keys_list{
		display: flex;
		align-items: center;
		padding: 26rpx 0;
		font-size: 24rpx;
		color: #222222;
	}
	.keys_title{
		font-size: 28rpx;
		color: #007AFF;
		margin: 28rpx 0;
	}
	.keys_list_name{
		margin-left: 20rpx;
	}
	
</style>
